Performance Timeline: En Omfattende Guide til Indsamling af Målinger

I nutidens hurtige digitale verden er en hjemmesides performance altafgørende. Brugere forventer, at hjemmesider indlæses hurtigt og reagerer øjeblikkeligt. En langsom hjemmeside kan føre til frustration, forladte sessioner og i sidste ende tabt omsætning. Heldigvis tilbyder moderne webbrowsere kraftfulde værktøjer til at måle og analysere en hjemmesides performance. Et af de mest værdifulde af disse værktøjer er Performance Timeline API'et.

Denne omfattende guide vil udforske Performance Timeline API'et i detaljer og dække alt fra dets grundlæggende koncepter til avancerede teknikker til indsamling og analyse af performance-målinger. Vi vil dykke ned i de forskellige typer af performance-poster, demonstrere hvordan man bruger API'et effektivt og give praktiske eksempler, der kan hjælpe dig med at optimere din hjemmesides performance.

Hvad er Performance Timeline API'et?

Performance Timeline API'et er et sæt JavaScript-interfaces, der giver adgang til performance-relaterede data indsamlet af browseren. Det giver udviklere mulighed for at måle forskellige aspekter af en hjemmesides performance, såsom:

• Sideindlæsningstid
• Indlæsningstid for ressourcer (billeder, scripts, stylesheets)
• Brugerdefinerede tidsmålinger
• Billedfrekvens og rendering-performance
• Hukommelsesforbrug

Ved at indsamle og analysere disse data kan udviklere identificere performance-flaskehalse og implementere optimeringer for at forbedre brugeroplevelsen. API'et giver en standardiseret måde at tilgå performance-data på, hvilket gør det lettere at bygge performance-overvågningsværktøjer, der fungerer på tværs af browsere.

Nøglekoncepter og Interfaces

Performance Timeline API'et er bygget op omkring nogle få nøglekoncepter og interfaces:

• Performance Timeline: Repræsenterer tidslinjen for performance-hændelser, der er opstået i løbet af en websides levetid. Det er det centrale punkt for adgang til performance-data.
• Performance Entry: Repræsenterer en enkelt performance-hændelse, såsom en ressourceindlæsningshændelse eller en brugerdefineret tidsmåling.
• Performance Observer: Giver udviklere mulighed for at overvåge Performance Timeline for nye performance-poster og reagere på dem i realtid.
• `performance`-objekt: Det globale objekt (`window.performance`), der giver adgang til Performance Timeline og relaterede metoder.

`performance`-objektet

`performance`-objektet er udgangspunktet for at interagere med Performance Timeline API'et. Det indeholder metoder til at hente performance-poster, rydde tidslinjen og oprette performance-observatører. Nogle af de mest almindeligt anvendte metoder inkluderer:

• `performance.getEntries()`: Returnerer en matrix med alle performance-poster på tidslinjen.
• `performance.getEntriesByName(name, entryType)`: Returnerer en matrix med performance-poster med et specifikt navn og posttype.
• `performance.getEntriesByType(entryType)`: Returnerer en matrix med performance-poster af en specifik type.
• `performance.clearMarks(markName)`: Rydder performance-mærker med et specifikt navn.
• `performance.clearMeasures(measureName)`: Rydder performance-målinger med et specifikt navn.
• `performance.now()`: Returnerer et tidsstempel med høj opløsning, typisk i millisekunder, der repræsenterer den tid, der er gået siden navigationen startede. Dette er afgørende for at måle varigheder.

Typer af Performance-poster

Performance Timeline API'et definerer flere forskellige typer af performance-poster, hvor hver især repræsenterer en specifik type performance-hændelse. Nogle af de vigtigste posttyper inkluderer:

• `navigation`: Repræsenterer navigationstiming for en sideindlæsning, herunder DNS-opslag, TCP-forbindelse, anmodnings- og svartider.
• `resource`: Repræsenterer indlæsningen af en specifik ressource, såsom et billede, script eller stylesheet.
• `mark`: Repræsenterer et brugerdefineret tidsstempel på tidslinjen.
• `measure`: Repræsenterer en brugerdefineret varighed på tidslinjen, beregnet mellem to mærker.
• `paint`: Repræsenterer den tid, det tager for browseren at male det første indhold på skærmen (First Paint) og det første meningsfulde indhold (First Contentful Paint).
• `longtask`: Repræsenterer opgaver, der blokerer hovedtråden i en længere periode (typisk længere end 50 ms), hvilket potentielt kan forårsage hakken i brugergrænsefladen (UI jank).
• `event`: Repræsenterer en browserhændelse, såsom et museklik eller et tastetryk.
• `layout-shift`: Repræsenterer uventede forskydninger i sidens layout, der kan forstyrre brugeroplevelsen (Cumulative Layout Shift).
• `largest-contentful-paint`: Repræsenterer den tid, det tager for det største indholdselement i viewporten at blive synligt.

Indsamling af Performance-målinger

Der er flere måder at indsamle performance-målinger på ved hjælp af Performance Timeline API'et. De mest almindelige tilgange inkluderer:

• Hentning af poster direkte fra tidslinjen: Brug af `performance.getEntries()`, `performance.getEntriesByName()` eller `performance.getEntriesByType()` til at hente specifikke performance-poster.
• Brug af en Performance Observer: Overvågning af tidslinjen for nye poster og reaktion på dem i realtid.

Hentning af Poster Direkte

Den enkleste måde at indsamle performance-målinger på er at hente poster direkte fra tidslinjen. Dette er nyttigt til at indsamle data, efter en specifik begivenhed er sket, såsom efter siden er indlæst, eller efter en bruger har interageret med et specifikt element.

Her er et eksempel på, hvordan man henter alle ressource-poster fra tidslinjen:

            
const resourceEntries = performance.getEntriesByType("resource");

resourceEntries.forEach(entry => {
 console.log(`Resource: ${entry.name}, Duration: ${entry.duration}ms`);
});

            

              
                Copy
              
            
          

Denne kode henter alle poster af typen "resource" og logger navnet og varigheden for hver ressource til konsollen.

Brug af en Performance Observer

En Performance Observer giver dig mulighed for at overvåge Performance Timeline for nye performance-poster og reagere på dem i realtid. Dette er især nyttigt til at indsamle data, efterhånden som de bliver tilgængelige, uden at skulle polle tidslinjen gentagne gange.

Her er et eksempel på, hvordan man bruger en Performance Observer til at overvåge for nye ressource-poster:

            
const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach(entry => {
 console.log(`Resource loaded: ${entry.name}, duration: ${entry.duration}ms`);
 });
});

observer.observe({ entryTypes: ["resource"] });

            

              
                Copy
              
            
          

Denne kode opretter en Performance Observer, der lytter efter nye poster af typen "resource". Når en ny ressource-post tilføjes til tidslinjen, udføres observatørens callback-funktion, som logger ressourcens navn og varighed til konsollen. `observer.observe()`-metoden specificerer, hvilke posttyper observatøren skal overvåge.

Måling af Bruger-Timing

Performance Timeline API'et giver dig også mulighed for at definere dine egne brugerdefinerede performance-målinger ved hjælp af posttyperne `mark` og `measure`. Dette er nyttigt til at måle den tid, det tager for specifikke dele af din applikation at blive udført, såsom at rendere en komponent eller behandle brugerinput.

For at måle bruger-timing opretter du først et `mark` for at markere starten og slutningen af den sektion, du vil måle. Derefter opretter du en `measure` for at beregne varigheden mellem de to mærker.

Her er et eksempel på, hvordan man måler den tid, det tager at rendere en komponent:

            
performance.mark("component-render-start");

// Code to render the component

performance.mark("component-render-end");

performance.measure("component-render-time", "component-render-start", "component-render-end");

const measure = performance.getEntriesByName("component-render-time", "measure")[0];

console.log(`Component render time: ${measure.duration}ms`);

            

              
                Copy
              
            
          

Denne kode opretter to mærker, `component-render-start` og `component-render-end`, før og efter den kode, der renderer komponenten. Derefter opretter den en måling kaldet `component-render-time` for at beregne varigheden mellem de to mærker. Til sidst henter den målingsposten fra tidslinjen og logger varigheden til konsollen.

Analyse af Performance-målinger

Når du har indsamlet performance-målinger, skal du analysere dem for at identificere performance-flaskehalse og implementere optimeringer. Der er flere værktøjer og teknikker, du kan bruge til dette formål:

• Browserudviklerværktøjer: De fleste moderne webbrowsere har indbyggede udviklerværktøjer, der giver dig mulighed for at visualisere og analysere performance-data. Disse værktøjer inkluderer typisk et Performance-panel, der viser en tidslinje over performance-hændelser, samt værktøjer til profilering af JavaScript-kode og analyse af hukommelsesforbrug.
• Performance-overvågningsværktøjer: Der findes mange tredjeparts performance-overvågningsværktøjer, der kan hjælpe dig med at indsamle, analysere og visualisere performance-data. Disse værktøjer tilbyder ofte avancerede funktioner såsom realtidsovervågning, anomalidetektion og automatiseret rapportering. Eksempler inkluderer New Relic, Datadog og Sentry.
• Web Vitals: Googles Web Vitals-initiativ giver et sæt målinger, der anses for at være essentielle for at måle brugeroplevelsen. Disse målinger inkluderer Largest Contentful Paint (LCP), First Input Delay (FID) og Cumulative Layout Shift (CLS). Overvågning af disse målinger kan hjælpe dig med at identificere og løse almindelige performance-problemer.

Brug af Browserudviklerværktøjer

Browserudviklerværktøjer er en kraftfuld og let tilgængelig ressource til analyse af performance. Sådan kan du bruge Performance-panelet i Chrome Developer Tools (andre browsere har lignende funktionaliteter):

1. Åbn udviklerværktøjer: Højreklik på websiden og vælg "Inspicer" eller tryk på F12.
2. Naviger til Performance-panelet: Klik på fanen "Performance".
3. Start optagelse: Klik på optageknappen (normalt en cirkel) for at begynde at indsamle performance-data.
4. Interager med siden: Udfør de handlinger, du vil analysere, såsom at indlæse siden, klikke på knapper eller scrolle.
5. Stop optagelse: Klik på stopknappen for at afslutte optagelsen.
6. Analyser tidslinjen: Performance-panelet viser en tidslinje over performance-hændelser, herunder indlæsningstider, JavaScript-udførelse, rendering og painting.

Tidslinjen giver detaljerede oplysninger om hver hændelse, herunder dens varighed, starttidspunkt og forhold til andre hændelser. Du kan zoome ind og ud, filtrere hændelser efter type og inspicere individuelle hændelser for at få flere oplysninger. Fanerne "Bottom-Up," "Call Tree," og "Event Log" giver forskellige perspektiver på dataene, hvilket giver dig mulighed for at identificere performance-flaskehalse og optimere din kode.

Web Vitals: Måling af Brugeroplevelsen

Web Vitals er et sæt målinger defineret af Google til at måle brugeroplevelsen på en hjemmeside. At fokusere på disse målinger kan markant forbedre brugertilfredsheden og SEO-rangeringen.

• Largest Contentful Paint (LCP): Måler den tid, det tager for det største indholdselement i viewporten at blive synligt. En god LCP-score er 2,5 sekunder eller mindre.
• First Input Delay (FID): Måler den tid, det tager for browseren at reagere på den første brugerinteraktion (f.eks. at klikke på en knap eller trykke på et link). En god FID-score er 100 millisekunder eller mindre.
• Cumulative Layout Shift (CLS): Måler mængden af uventede layout-forskydninger, der opstår på siden. En god CLS-score er 0,1 eller mindre.

Du kan måle Web Vitals ved hjælp af forskellige værktøjer, herunder:

• Chrome User Experience Report (CrUX): Leverer performance-data fra den virkelige verden for hjemmesider baseret på anonymiserede Chrome-brugerdata.
• Lighthouse: Et automatiseret værktøj, der reviderer performance, tilgængelighed og SEO for websider.
• Web Vitals Extension: En Chrome-udvidelse, der viser Web Vitals-målinger i realtid, mens du browser på nettet.
• PerformanceObserver API: Indsaml web vitals-data direkte fra browseren, når hændelserne sker.

Praktiske Eksempler og Anvendelsesscenarier

Her er nogle praktiske eksempler og anvendelsesscenarier for, hvordan du kan bruge Performance Timeline API'et til at optimere din hjemmesides performance:

• Identificering af langsomt indlæsende ressourcer: Brug posttypen `resource` til at identificere billeder, scripts og stylesheets, der tager lang tid at indlæse. Optimer disse ressourcer ved at komprimere dem, bruge et Content Delivery Network (CDN) eller anvende lazy-loading. For eksempel er mange e-handelsplatforme som Shopify, Magento eller WooCommerce afhængige af billeder for at sælge produkter. At optimere billedindlæsning ved hjælp af performance timeline-data vil forbedre kundeoplevelsen, især for mobilbrugere.
• Måling af JavaScript-udførelsestid: Brug posttyperne `mark` og `measure` til at måle den tid, det tager for specifikke JavaScript-funktioner at blive udført. Identificer langsomtkørende funktioner og optimer dem ved at bruge mere effektive algoritmer, cache resultater eller udskyde udførelsen til et senere tidspunkt.
• Opdagelse af lange opgaver: Brug posttypen `longtask` til at identificere opgaver, der blokerer hovedtråden i en længere periode. Opdel disse opgaver i mindre bidder eller flyt dem til en baggrundstråd for at forhindre hakken i brugergrænsefladen.
• Overvågning af First Contentful Paint (FCP) og Largest Contentful Paint (LCP): Brug posttyperne `paint` og `largest-contentful-paint` til at overvåge den tid, det tager for det første indhold og det største indhold at blive vist på skærmen. Optimer den kritiske renderingssti for at forbedre disse målinger.
• Analyse af Cumulative Layout Shift (CLS): Brug posttypen `layout-shift` til at identificere elementer, der forårsager uventede layout-forskydninger. Reserver plads til disse elementer eller brug `transform`-egenskaben til at animere dem uden at forårsage layout-forskydninger.

Avancerede Teknikker

Når du har en solid forståelse af det grundlæggende i Performance Timeline API'et, kan du udforske nogle avancerede teknikker for yderligere at optimere din hjemmesides performance:

• Real User Monitoring (RUM): Indsaml performance-data fra rigtige brugere i felten for at få et mere præcist billede af din hjemmesides performance. Brug et RUM-værktøj eller implementer din egen brugerdefinerede RUM-løsning ved hjælp af Performance Timeline API'et. Disse data kan derefter bruges til at bestemme regionale performance-forskelle. For eksempel kan en hjemmeside hostet i USA opleve langsommere indlæsningstider i Asien på grund af netværkslatens.
• Syntetisk overvågning: Brug syntetisk overvågning til at simulere brugerinteraktioner og måle performance i et kontrolleret miljø. Dette kan hjælpe dig med at identificere performance-problemer, før de påvirker rigtige brugere.
• Automatiseret performance-test: Integrer performance-test i din continuous integration/continuous deployment (CI/CD) pipeline for automatisk at opdage performance-regressioner. Værktøjer som Lighthouse CI kan bruges til at automatisere denne proces.
• Performance-budgettering: Sæt performance-budgetter for nøglemålinger, såsom sideindlæsningstid, ressourcestørrelse og JavaScript-udførelsestid. Brug automatiserede værktøjer til at overvåge disse budgetter og advare dig, når de overskrides.

Kompatibilitet på Tværs af Browsere

Performance Timeline API'et er bredt understøttet af moderne webbrowsere, herunder Chrome, Firefox, Safari og Edge. Der kan dog være nogle forskelle i implementeringen og adfærden af API'et på tværs af forskellige browsere.

For at sikre kompatibilitet på tværs af browsere er det vigtigt at teste din kode i forskellige browsere og bruge funktionsdetektering til at nedgradere funktionaliteten elegant, hvis API'et ikke understøttes. Biblioteker som `modernizr` kan hjælpe med funktionsdetektering.

Bedste Praksis

Her er nogle bedste praksisser for brug af Performance Timeline API'et:

• Brug Performance Observers til realtidsovervågning: Performance Observers giver en mere effektiv måde at indsamle performance-data på end gentagne gange at polle tidslinjen.
• Vær opmærksom på performance-påvirkningen ved at indsamle performance-data: Indsamling af for mange data kan have en negativ indvirkning på din hjemmesides performance. Indsaml kun de data, du har brug for, og undgå at udføre dyre operationer i Performance Observer's callback-funktion.
• Brug meningsfulde navne til mærker og målinger: Dette vil gøre det lettere at analysere dataene og identificere performance-flaskehalse.
• Test din kode i forskellige browsere: Sørg for kompatibilitet på tværs af browsere ved at teste din kode i forskellige browsere og bruge funktionsdetektering.
• Kombiner med andre optimeringsteknikker: Performance Timeline API'et hjælper med at måle og identificere problemer. Brug det i sammenhæng med etablerede bedste praksisser for weboptimering (billedoptimering, minificering, CDN-brug) for holistiske performance-forbedringer.

Konklusion

Performance Timeline API'et er et kraftfuldt værktøj til at måle og analysere en hjemmesides performance. Ved at forstå API'ets nøglekoncepter og interfaces kan du indsamle værdifulde performance-målinger og bruge dem til at identificere performance-flaskehalse og implementere optimeringer. Ved at fokusere på Web Vitals og implementere avancerede teknikker som RUM og automatiseret performance-test kan du levere en hurtigere, mere smidig og mere behagelig brugeroplevelse. At omfavne Performance Timeline API'et og integrere performance-analyse i din udviklingsworkflow vil føre til betydelige forbedringer i din hjemmesides performance og brugertilfredshed i nutidens performance-drevne webmiljø.